<!--
 * @Author: wangshuguang
 * @Date: 2022-03-29 11:21:16
 * @LastEditTime: 2022-04-07 14:18:52
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="memberLineChrars">
     <lineChars :options="lineChrarsOption"/>
  </div>
</template>

<script>
import lineChars from "@/components/chars.vue";
export default {
  components:{
    lineChars
  },
  props:{
    baseData:{}
  },
  data(){
    return{
      lineChrarsOption:{},
    }
  },
  watch:{
    baseData:{
      handler(){
        this.initChars()
      },
      immediate: true
    }
  },
  methods:{
    initChars(){
      console.log('baseData',this.baseData)
      let xData = []
      let yData = []
      let lData = []
	 
	   // console.log('看看是不是按顺序',Object.keys(this.baseData))
	   // for(var i in this.baseData) {
	   // console.log(i,":",this.baseData[i]);
	   // }
      Object.keys(this.baseData).forEach((key,index) => {
		  
        let _data = this.baseData[key]
        if(index == 0){
          xData = _data.map(v => v.lineDate)
        }
        yData.push({
          name: key,
          type: 'line',
          stack: key,
          data: _data.map(val => val.lineAmount)
        })
          lData.push(key)
      })
      this.lineChrarsOption = {
        title: {
          text: 'Stacked Line'
        },
        color:['#FFB72F','#FE7316','#CE56EC','#2BC1E1','#3498FF'],
        grid:{
          bottom: '28%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: "0",
          data: lData
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {  
            interval:0,  
            rotate:-70  
          },  
          boundaryGap: ['20%', '20%'],
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: yData
      }
    }
  }
}
</script>

<style lang="less" scoped>
.memberLineChrars{
  height: 800px;
}
</style>